<template>
    <div>
        <div class="operarea">
            <div class="seach">
                <el-input v-model="seachForm.userName" :placeholder="$t('username')" clearable size="mini"></el-input>
                <el-button size="mini" icon="el-icon-search" @click="seachData"></el-button>
            </div>
            <div class="btnList">
                <el-button size="mini" @click="exportDialogVisible = true">{{$t('export')}}</el-button>
            </div>
        </div>
        <el-card class="cardBox">
            <el-table style="width: 100%" :data="userTab" stripe v-adaptive="{bottomOffset: 85}" height="100">
                <el-table-column prop="userName" :label="$t('username')">
                </el-table-column>
                <el-table-column prop="phone" :label="$t('phonenum')">
                </el-table-column>
                <el-table-column prop="status" :label="$t('status')">
                </el-table-column>
                <el-table-column prop="regTime" :label="$t('registime')">
                </el-table-column>
                <el-table-column prop="address" width="120" :label="$t('order')">
                    <template v-slot="scope">
                        <img src="@/assets/view.png" :alt="$t('picisgone')" @click="getOrder(scope.row.id)">
                    </template>
                </el-table-column>
                <el-table-column prop="address" width="120" :label="$t('perdata')">
                    <template v-slot="scope">
                        <img src="@/assets/view.png" :alt="$t('picisgone')" @click="getPre(scope.row.id)">
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                small
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :pager-count="11"
                :current-page.sync="seachForm.pageNo"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="seachForm.pageSize"
                layout="sizes, prev, pager, next"
                :total="total">
            </el-pagination>
        </el-card>
        <!-- 订单 -->
        <el-dialog :title="$t('examine')" :visible.sync="orderDialogVisible" width="800px" class="smallDlog" :close-on-click-modal="false">
            <el-table :data="orderTab" border style="width: 100%">
                <el-table-column prop="userName" :label="$t('username')" min-width="80">
                </el-table-column>
                <el-table-column prop="orderNum" :label="$t('ordernum')" min-width="95">
                </el-table-column>
                <el-table-column prop="orderType" :label="$t('ordercat')" min-width="105">
                </el-table-column>
                <el-table-column prop="styleNum" :label="$t('stylenum')" min-width="98">
                </el-table-column>
                <el-table-column prop="price" :label="$t('unitprice')" min-width="74">
                </el-table-column>
                <el-table-column prop="number" :label="$t('number')" min-width="71">
                </el-table-column>
                <el-table-column prop="totalPrice" :label="$t('totalprice')" min-width="80">
                </el-table-column>
                <el-table-column prop="orderTime" :label="$t('ordertime')" min-width="80">
                </el-table-column>
                <el-table-column prop="status" :label="$t('status')" min-width="60">
                </el-table-column>
                <el-table-column prop="address" width="70" :label="$t('details')">
                    <template v-slot="scope">
                        <img src="@/assets/view.png" :alt="$t('picisgone')" @click="getPreOrder(scope.row.id)">
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 个人数据 -->
        <el-dialog :title="$t('examine')" :visible.sync="perDialogVisible" width="850px" class="smallDlog" :close-on-click-modal="false">
            <el-table :data="perTab" border style="width: 100%">
                <el-table-column prop="sex" :label="$t('sex')" min-width="80">
                </el-table-column>
                <el-table-column prop="age" :label="$t('age')" min-width="80">
                </el-table-column>
                <el-table-column prop="height" :label="$t('height')" min-width="80">
                </el-table-column>
                <el-table-column prop="weight" :label="$t('weight')" min-width="112">
                </el-table-column>
                <!-- <el-table-column prop="changeNum" :label="$t('changenum')" min-width="127">
                </el-table-column>
                <el-table-column prop="changeTime" :label="$t('changetime')" min-width="90">
                </el-table-column>
                <el-table-column prop="remark" :label="$t('remark')" min-width="80">
                </el-table-column> -->
            </el-table>
        </el-dialog>
        <!-- 导出 -->
        <el-dialog :title="$t('export')" :visible.sync="exportDialogVisible" width="420px" class="smallDlog">
            <span>{{$t('whetoexptabdata')}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="exportDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="exportData">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            total: 0,
            seachForm: {
                userName: '',
                pageNo: 1,
                pageSize: 10
            },
            userTab: [{
                userName: 'knowknow'
            }],
            orderDialogVisible: false,
            orderTab: [],
            perDialogVisible: false,
            perTab: [],
            exportDialogVisible: false
        }
    },
    methods: {
        seachData () {},
        exportData () {},
        handleSizeChange (newSize) {
            this.seachForm.pageSize = newSize
            this.seachData()
        },
        handleCurrentChange (newNum) {
            this.seachForm.pageNo = newNum
            this.seachData()
        },
        getOrder () {
            this.orderDialogVisible = true
        },
        getPreOrder () {},
        getPre () {
            this.perDialogVisible = true
        }
    }
}
</script>

<style lang="less" scoped>
@import './user.less';
</style>
